<template>
  <div class="login-container flex a-c">
    <div class="banner flex j-c flex-col a-c">
      <h3>这里本来该是个插画图片啥的</h3>
      <h3>但怕侵权就没放</h3>
      <h3>反正你们拿去也得换掉</h3>
    </div>
    <a-form
      :rules="login_rules"
      ref="loginForm"
      :model="loginModel"
      class="login-form animate__animated animate__bounceInDown"
      :wrapper-col="{ span: 24 }"
      @keydown.enter="handleLogin"
    >
      <h1 class="title">{{ GLOBAL_TITLE }}</h1>

      <a-form-item name="username">
        <a-input
          autocomplete="off"
          v-model:value="loginModel.username"
          placeholder="请输入用户名/admin"
        >
          <template #prefix>
            <i-User style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="password">
        <a-input
          autocomplete="off"
          v-model:value="loginModel.password"
          type="password"
          placeholder="请输入密码/123123"
        >
          <template #prefix>
            <i-Lock style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-checkbox v-model:checked="loginModel.remember">
          <span class="remember">24小时内免登录</span>
        </a-checkbox>
      </a-form-item>
      <a-form-item>
        <sb-btn
          :loading="loading"
          @click="handleLogin"
          block
          size="large"
          type="primary"
          icon="login"
          class="login-form-button"
          >登 录</sb-btn
        >
      </a-form-item>
      <div className="footer-box"></div>
    </a-form>
    <CopyRight />
  </div>
</template>

<script>
import { reactive, toRefs, ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { CopyRight } from "~components";
import { $post } from "~mixins/useRequest";
import { $ms, $me } from "~mixins/useMsg";
import { $encrypt } from "~mixins/useUtils";
import { GLOBAL_TITLE, COMPANY_NAME } from "~config";
import login_rules from "./login_rule";
export default {
  components: { CopyRight },
  setup() {
    let store = useStore();
    let router = useRouter();
    let route = useRoute();
    let loginForm = ref(null);
    let is_dev = process.env.NODE_ENV === "development";
    let data = reactive({
      loading: false,
      loginModel: {
        remember: false,
        username: "",
        password: "",
      },
      login_rules,
    });

    onMounted(() => {
      if (is_dev) {
        data.loginModel.username = "admin";
        data.loginModel.password = "123123";
      }
    });

    //todo setup目前似乎还不支持辅助函数 20201121
    let login = (loginModel) => store.dispatch("account/login", loginModel);

    let handleLogin = async (e) => {
      await loginForm.value.validate();
      data.loading = true;
      try {
        data.loginModel.password = $encrypt(data.loginModel.password);
        let success = await login(data.loginModel);
        if (success) {
          $ms("登录成功");
          router.push(route.query.redirect || "/");
        } else $me("用户名或密码错误");
      } catch (error) {
        $me("服务器异常");
        data.loading = false;
      }

      loginForm.value.resetFields();
      data.loading = false;
    };
    return {
      loginForm,
      ...toRefs(data),
      handleLogin,
      is_dev,
      GLOBAL_TITLE,
      COMPANY_NAME,
    };
  },
};
</script>

<style scoped lang='scss'>
@import "./login.scss";
</style>